/***
Icons can be included in any element. Icons use the ::before and ::after pseudo elements so if you're already using them it won't work.

To add an icon to an element simply include `@icon-left` or `@icon-right` as well as the icon name you want to include (for example: `@icon-tango-emblem-favorite`).

SleekMobile comes with the [Tango Desktop Project](http://tango.freedesktop.org/Tango_Desktop_Project). Have a look at its [SASS file](../css/icons/tango/16x16.scss) for all available icons (there's over 200 of them).

If you want icons on both sides include both `@icon-left` and `@icon-right`. Pass in 'after' to the second icon name to place it on the right side (for example: `@icon-tango-emblem-favorite(after))`.

* Left and right: [Like](#double)
* Right: [Warning](#right)
* And left: [Angel](#left)
***/
@import "#{$DOCROOT}Sites/SleekMobile/Styles/SleekMobile/CSS/Icons/Tango/16x16.scss";
// @import "#{$DOCROOT}Sites/SleekMobile/Styles/SleekMobile/CSS/Icons/Tango/22x22.scss";
// @import "#{$DOCROOT}Sites/SleekMobile/Styles/SleekMobile/CSS/Icons/Tango/32x32.scss";

// The actual icon "ball" - included in &:before or &:after by @icon-left/right
@mixin icon ($align: left) {
	background: $icon-bg-color;

	display: block;
	content: "\0020";

	width: $icon-bg-size;
	height: $icon-bg-size;
	margin-top: -$icon-bg-size / 2;

	position: absolute;
	#{$align}: $padding-left-right / 2;
	top: 50%;

	border: 0;
	@include border-radius($icon-bg-size / 2);
	@include box-shadow(inset 1px 1px 1px darken($icon-bg-color, 40%));
}

@mixin icon-left ($where: before, $align: left) {
	position: relative;
	padding-left: $padding-left-right / 2 + $icon-bg-size + $padding-left-right / 2;

	@if $align == center {
		padding-right: $padding-left-right / 2 + $icon-bg-size + $padding-left-right / 2;
	}

	&:#{$where} {
		@include icon(left);
	}
}

@mixin icon-right ($where: after, $align: left) {
	position: relative;
	padding-right: $padding-left-right / 2 + $icon-bg-size + $padding-left-right / 2;

	@if $align == center {
		padding-left: $padding-left-right / 2 + $icon-bg-size + $padding-left-right / 2;
	}

	&:#{$where} {
		@include icon(right);
	}
}

// TODO
@mixin icon-only {
	text-indent: -1000000px;
	position: relative;
	letter-spacing: -6px;

	&:before {
		@include icon(left);
		text-indent: 0;
	}
}
